<template>
  <div>
    <el-row>
      <el-col :span="4">&nbsp &nbsp</el-col>
      <el-col :span="13">

        <el-table :data="page.records" border>
          <el-table-column prop="venueName" label="场馆名" width="135">
          </el-table-column>
          <el-table-column prop="coachName" label="教练名" width="115">
          </el-table-column>
          <el-table-column prop="coachTypeId" label="团/私" width="130">
            <template slot-scope="scope">
              <template v-if="scope.row.coachTypeId == 1">团教</template>
              <template v-if="scope.row.coachTypeId == 2">私教</template>
            </template>
          </el-table-column>
          <el-table-column prop="coachPhone" label="教练手机" width="130">
          </el-table-column>
          <el-table-column prop="joinDate" label="入职时间" width="170">
          </el-table-column>

          <el-table-column label="操作" width="151">
           <template #default="scope">
              <el-button @click="cancel(scope.row)"  type="text" size="small">解约</el-button>
            </template>
          </el-table-column>

        </el-table>

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="page.pageNum" :page-sizes="[1, 2, 3, 5]" :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="page.total">
        </el-pagination>

      </el-col>

      <el-col :span="5">&nbsp</el-col>

    </el-row>

  </div>
</template>

<script>
  export default {
    name: "VenueExamine",
    data() {
      return {
        page: {},
        param: {
          pageNum: 1,
          pageSize: 5,
        },
      }
    },
    methods: {
      cancel(obj){
        this.$http.get("/venue/yVenueCoach/leaveVenueCoach", {
          params: {
            coachId: obj.coachId,
            venueId: obj.venueId
          }
        }).then(resp => {
          this.loadVenueCoach();
        })
      },

      //分页
      handleSizeChange(val) {
        this.param.pageSize = val;
        this.loadVenueCoach();
      },
      handleCurrentChange(val) {
        this.param.pageNum = val;
        this.loadVenueCoach();
      },
      //分页查询
      loadVenueCoach() {
        this.$http.get("/venue/yVenueCoach/loadPageVenueCoach", {
          params: {
            pageNum: this.param.pageNum,
            pageSize: this.param.pageSize
          }
        }).then(resp => {
          this.page = resp.data.data;
        })
      }
    },
    created() {
      this.loadVenueCoach();
    }
  }
</script>

<style>
</style>
